<template>
    <van-tabbar v-model="active" active-color="#f5222d" route :placeholder="true">
        <van-tabbar-item 
        v-for="item in tabBarName"
        :key="item.path"
        :to="item.path"
        :badge="item.meta.title === '购物车' ? cartNum.length:''"
        :icon="item.meta?.icon"
        >{{ item.meta?.title }}</van-tabbar-item>
    </van-tabbar>

</template>


<script setup>
import { computed, ref } from 'vue'
import routes from '../router/routes'
import { useStore } from 'vuex'

const active = ref(0)
const store = useStore()

let cartNum = computed(()=>store.getters['cartModule/getCartList'])
//定义渲染tabbar组件显示项目
const tabBarName = computed(()=>{
    return routes.filter(item =>{
        return item.meta?.inMenu
    })
})


</script>


<style lang="less" scoped>

</style>